<template>
  <div class="pages transactionSee">
    <div class="pageLevel">
      <!-- 头部 -->
      <el-button style="margin:10px 0 10px 30px;" type="primary" @click="goBack()"> 返回</el-button>
      <div class="content" v-if="showTab=='PRE_RECHARGE'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="预付款充值：">
            <span>{{tableData.operPrice}} 元</span>
          </el-form-item>
          <el-form-item label="交易时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item class="alignment" label-width="130px" label="企业（付款方）：">
            <span>{{tableData.payerName}}</span>
          </el-form-item>
          <el-form-item label="支付方式：">
            <span v-if="tableData.payType=='ZJPAY'">中金支付</span>
            <span v-if="tableData.payType=='UNDE_LINE'">线下支付</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.code}}</span>
          </el-form-item>
          <el-form-item label="预付款余额：">
            <span>{{tableData.price}} 元</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='PRE_INIT'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="初始值: ">
            <span>{{tableData.operPrice}} 元</span>
          </el-form-item>
          <el-form-item label="交易时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item class="alignment" label-width="130px" label="企业（付款方）：">
            <span>{{tableData.payerName}}</span>
          </el-form-item>
          <el-form-item label="预付款余额：">
            <span>{{tableData.price}} 元</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='PRE_RETURN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="退款金额: ">
            <span>{{tableData.operPrice}} 元</span>
          </el-form-item>
          <el-form-item label="状态：">
            <span v-if="tableData.status==0">已驳回</span>
            <span v-if="tableData.status==1">已完成</span>
            <span v-if="tableData.status==2">审批中</span>
          </el-form-item>
          <el-form-item label="提交时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <div v-if="tableData.status==2">
            <el-form-item class="alignment" label-width="130px" label="企业（付款方）：">
              <span>{{tableData.payeeName}}</span>
            </el-form-item>
            <el-form-item class="alignment" label-width="130px" label="预付款账户余额：">
              <span>{{tableData.price}} 元</span>
            </el-form-item>
            <el-form-item label="订单号：">
              <span>{{tableData.code}}</span>
            </el-form-item>
          </div>
          <div v-if="tableData.status==1">
            <el-form-item label="审批时间:">
              <span>{{tableData.updateTime}}</span>
            </el-form-item>
            <el-form-item class="alignment" label-width="130px" label="企业（付款方）：">
              <span>{{tableData.payeeName}}</span>
            </el-form-item>
            <el-form-item class="alignment" label-width="130px" label="预付款账户余额：">
              <span>{{tableData.price}} 元</span>
            </el-form-item>
          </div>
          <div v-if="tableData.status==0">
            <el-form-item label="审批时间：">
              <span>{{tableData.updateTime}}</span>
            </el-form-item>
            <el-form-item class="alignment" label-width="130px" label="企业（付款方）：">
              <span>{{tableData.payeeName}}</span>
            </el-form-item>
            <el-form-item class="alignment" label-width="130px" label="预付款账户余额：">
              <span>{{tableData.price}} 元</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='PRE_COMMODITY_PURCHASE'">
        <!-- v-if="tableData.isCredit==1" -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item class="alignment" label-width="130px" label="预付款支出金额: ">
            <span>{{tableData.operPrice}} 元</span>
          </el-form-item>
          <div v-if="goddsTab">
            <el-form-item label="商品总金额:">
              <span>{{tableData.confirmAmount}}</span>
            </el-form-item>
          </div>
          <el-form-item label="交易时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item class="alignment" label-width="130px" label="预付款账户余额：">
            <span>{{tableData.price}} 元</span>
          </el-form-item>
          <div v-if="goddsTab">
            <el-form-item label="销售单号:">
              <span>{{tableData.saleCode}}</span>
            </el-form-item>
            <el-table :data="tableData.goodsList" border style="width: 100%">
              <el-table-column type="index" label="商品/服务">
                <el-table-column type="index" label="序号" width="55" align="center">
                </el-table-column>
                <el-table-column prop="barCode" label="条码" align="center">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品" align="center" width="200">
                </el-table-column>
                <el-table-column prop="goodsSpec" label="规格型号" align="center">
                  <template slot-scope="scope">
                    <div v-for="(item, index) in scope.row.goodsSpec" :key="index">
                      <span>{{item.paramName}} :</span>
                      <span>{{item.paramValue}} </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="confirmNum" label="数量" align="center">
                </el-table-column>
                <el-table-column prop="goodsPrice" label="单价" align="center">
                </el-table-column>
                <el-table-column prop="goodsAmount" label="总价" align="center">
                  <template slot-scope="scope">
                    <span>{{(Number(scope.row.goodsPrice)*Number(scope.row.confirmNum)).toFixed(2)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <el-form-item label="确认运费:">
              <span>{{tableData.confirmFreight}}</span>
            </el-form-item>
            <!-- <el-form-item label="确认税费:">
              <span>{{tableData.bizOrderNo}}</span>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='PRE_COMMODITY_RETURN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="收到退款金额: ">
            <span>{{tableData.operPrice}} 元</span>
          </el-form-item>
          <div v-if="goddsTab">
            <el-form-item label="商品总金额：">
              <span>{{tableData.amount}}</span>
            </el-form-item>
          </div>
          <el-form-item label="交易时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item class="alignment" label-width="130px" label="预付款账户余额：">
            <span>{{tableData.price}} 元</span>
          </el-form-item>
          <div v-if="goddsTab">
            <el-form-item label="销售单号:">
              <span>{{saleCode}}</span>
            </el-form-item>
            <el-table :data="tableData.goodsList" border style="width: 100%">
              <el-table-column type="index" label="商品/服务">
                <el-table-column prop="barCode" label="条码" align="center">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品" align="center" width="200">
                </el-table-column>
                <el-table-column prop="goodsSpec" label="规格型号" align="center">
                  <template slot-scope="scope">
                    <div v-for="(item, index) in scope.row.goodsSpec" :key="index">
                      <span>{{item.paramName}} :</span>
                      <span>{{item.paramValue}} </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="goodsNum" label="数量" align="center">
                </el-table-column>
                <el-table-column prop="goodsPrice" label="单价" align="center">
                </el-table-column>
                <el-table-column prop="goodsAmount" label="总价" align="center">
                </el-table-column>
              </el-table-column>
            </el-table>
            <el-form-item label="退款运费:">
              <span>{{tableData.freight}}</span>
            </el-form-item>
            <!-- <el-form-item label="确认税费:">
              <span>{{tableData.bizOrderNo}}</span>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  tradeInfo,
  selectOrderGoodsPurchaseReturnDetail,
  publicOrderDetails,
  findBySalesPurchaseNo
} from "@/api";
import util from "@/util";
export default {
  computed: mapState(["merchantId", "path"]),
  data() {
    return {
      saleId: "",
      saleCode: "",
      id: "",
      showTab: "",
      goddsTab: true,
      showTabtype: "",
      tableData: {},
      ruleForm: {
        name: "111"
      },
      rules: {
        name: [{ required: true, message: "请输入打款金额", trigger: "blur" }]
      }
    };
  },
  created() {
    this.showTab = util.getQuery().showTab;
    this.id = util.getQuery().id;
    let arr = this.path;
    arr.pop();
  },
  mounted() {
    this.getdata();
  },
  methods: {
    Purchase() {
      //console.log(this.tableData.bizId);
      if (this.tableData.bizId == "" || this.tableData.bizId == null) {
        this.goddsTab = false;
        return false;
      }
      let postdata = {
        id: this.saleId
      };
      publicOrderDetails(postdata).then(res => {
        let time = this.tableData.createTime;
        this.tableData = Object.assign(this.tableData, res.data);
        this.tableData.createTime = time;
        //console.log(8854545);
      });
    },
    Returns() {
      if (this.tableData.bizId == "" || this.tableData.bizId == null) {
        this.goddsTab = false;
        return false;
      }
      let postdata = {
        id: this.tableData.bizId
      };
      selectOrderGoodsPurchaseReturnDetail(postdata).then(res => {
        let time = this.tableData.createTime;
        this.tableData = Object.assign(this.tableData, res.data);
        this.tableData.createTime = time;
      });
    },
    findBySalesPurchaseNo() {
      let postdata = {
        bizId: this.tableData.bizId
      };
      findBySalesPurchaseNo(postdata).then(res => {
        this.saleId = res.data.saleId;
        this.saleCode = res.data.saleCode;
        console.log(this.tableData.tradeType);
        if (this.tableData.tradeType == "PRE_COMMODITY_PURCHASE") {
          this.Purchase();
        }
        if (this.tableData.tradeType == "PRE_COMMODITY_RETURN") {
          this.Returns();
        }
      });
    },
    getdata() {
      let postdata = {
        id: this.id
      };
      tradeInfo(postdata).then(res => {
        this.tableData = res.data;
        if (
          this.tableData.tradeType == "PRE_COMMODITY_PURCHASE" ||
          this.tableData.tradeType == "PRE_COMMODITY_RETURN"
        ) {
          this.findBySalesPurchaseNo();
        }
        //console.log(this.tableData.tradeType);
      });
    },
    goBack() {
      history.back();
    }
  }
};
</script>
<style>
.alignment .el-form-item__label {
  margin-left: -30px;
}
.alignment .el-form-item__content {
  margin-left: 100px !important;
}
</style>

<style scoped>
.content {
  width: 800px;
  margin: 20px 0 0 40px;
}
.transactionSee span {
  color: #606266;
}
.infon_text-ul {
  margin-left: 85px;
  width: 750px;
  height: 200px;
}
.infon_text-ul li {
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ul .lines {
  border-bottom: 1px dashed #ccc;
}
.infon_text-ul li .span1 {
  position: absolute;
  right: 350px;
}
.infon_text-ul li span {
  position: absolute;
  right: 25px;
}
.infon_text-ul .li-font {
  font-weight: normal;
}

.infon_text-ul .li-height {
  height: 50px;
  line-height: 50px;
}
.infon_text-ul .li-red span {
  color: red;
}
</style>

